<style>
body {
  background-image: url("../views/img/loginAndReg.jpg");
  margin: 0;
  background-size: cover;
  background-repeat: no-repeat;
}

.el-form-item__error {
  width: 300px;
}

.drag {
  width: 300px;
  height: 40px;
  line-height: 40px;
  background-color: #e8e8e8;
  position: relative;
  margin: -2px 0 0 0;
}

.bg {
  width: 40px;
  height: 100%;
  position: absolute;
  background-color: #75CDF9;
}

.text {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  user-select: none;
}

.btn {
  width: 40px;
  height: 38px;
  position: absolute;
  border: 1px solid #ccc;
  cursor: move;
  font-family: "宋体";
  text-align: center;
  background-color: #fff;
  user-select: none;
  color: #666;
}

</style>

<template>
  <div id="app">
    <el-card style="border: 0; width: 352px; height: 415px; margin: 130px auto 0;
            background-color: rgba(255,255,255,0.3); position: relative; padding: 0">
      <h1 style="font-size: 20px; color: green; text-align: center">疫情防控用户注册</h1>

      <!--用户名注册表单-->
      <el-form status-icon :model="ruleForm" :rules="rules" ref="ruleForm"
               class="demo-ruleForm" style="width: 280px; margin: 17px 0 0 15px">

        <!--用户名-->
        <i class="el-icon-s-custom" style="font-size: 25px;
            position: absolute; top: 72px; left: 10px"></i>
        <el-form-item prop="userName">
          <el-input autocomplete="off" clearable v-model="ruleForm.userName"
                    prefix-icon="el-icon-s-custom" type="text" placeholder="请输入用户名"
                    style="width: 300px"></el-input>
        </el-form-item>

        <!--密码-->
        <i class="el-icon-unlock" style="font-size: 25px;
             position: absolute; top: 133px; left: 10px"></i>
        <el-form-item prop="userPassword">
          <el-input maxlength="18" autocomplete="off" show-password v-model="ruleForm.userPassword"
                    prefix-icon="el-icon-unlock" type="password" placeholder="请输入密码"
                    style="width: 300px"></el-input>
        </el-form-item>

        <!--确认密码-->
        <i class="el-icon-lock" style="font-size: 25px; position: absolute; top: 196px; left: 10px"></i>
        <el-form-item prop="confirmPassword">
          <el-input autocomplete="off" show-password v-model="ruleForm.confirmPassword"
                    prefix-icon="el-icon-lock" type="password" placeholder="确认密码"
                    style="width: 300px"></el-input>
        </el-form-item>

        <!--手机号-->
        <i class="el-icon-phone" style="font-size: 25px;position: absolute; top: 257px; left: 10px"></i>
        <el-form-item prop="userPhone">
          <el-input autocomplete="off" maxlength="11" show-word-limit clearable
                    v-model="ruleForm.userPhone" prefix-icon="el-icon-phone"
                    type="text" placeholder="请输入手机号"
                    style="width: 300px"></el-input>
        </el-form-item>

        <!--注册、清空按钮-->
        <el-form-item style="position: relative;left: 28px;top: -10px">
          <el-button style="color: black;font-size: 14px; width: 150px; border-radius: 30px"
                     type="success" @click="reg('ruleForm')">注册
          </el-button>
          <el-button style="font-size: 14px; margin: 0; border-radius: 30px" type="info"
                     plain:true @click="resetForm('ruleForm')">清空
          </el-button>
        </el-form-item>

        <!--返回登录-->
        <el-button style="font-size: 14px; position: relative; left:28px;
                           top:-20px;
                           border-radius: 30px; width: 225px;color: black"
                   type="success" @click="backToLogin()">返回登录
        </el-button>

      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (value.length < 8) {
        callback(new Error('请输入8-18位包含英文、数字的密码！'))
      } else {
        if (this.ruleForm.confirmPassword !== '') {
          this.$refs.ruleForm.validateField('confirmPassword');
        }
        callback();
      }
    };

    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.userPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    return {
      ruleForm: {
        userName: '',
        userPassword: '',
        confirmPassword: '',
        userPhone: ''
      },
      rules: {
        userName: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 2, max: 10, message: '请输入2~10位字符的用户名', trigger: 'blur'}
        ],
        userPassword: [
          {validator: validatePass, trigger: 'blur'}
        ],
        confirmPassword: [
          {validator: validatePass2, trigger: 'blur'}
        ],
        userPhone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {min: 11, max: 11, message: '请输入11位数手机号码', trigger: 'blur'},
          {pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确,请重新输入！', trigger: 'blur'}
        ],
      }
    };
  },
  methods:{
    backToLogin() {
      this.$router.push('/login');
    },
    reg(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:8080/user/reg'
          let formData = this.qs.stringify(this.ruleForm);
          console.log('formData = ', formData);
          this.axios.create({'headers':{'Authorization': localStorage.getItem('userJwt')}})
              .post(url,formData).then((response)=>{
            let responseBody = response.data;
            if (responseBody.state === 20000) {
              this.$notify.success({
                title: '提示',
                message: "注册成功！",
                showClose: true,
                position: 'top-left'
              });
              this.$router.push('/login');
            } else {
              this.$message.error(responseBody.message);
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
}
</script>

